<template>
	<!--指定领取人-->
	<uni-popup ref="popup" type="bottom" :safe-area="false" style="z-index: 999;">
		<view class="red-content" :style="{height:systemInfo.screenHeight + 'px'}">
			<view style="background: #ffffff; width: 750rpx;" :style="{ height: systemInfo.statusBarHeight + 'px' }"></view>
			<view class="content-navigation d-flex d-r a-center j-between">
				<view class="navigation-left d-flex d-r a-center j-center" @tap="close">
				    <image src="/static/center/back.png" class="back"></image>
				</view>
				<text class="navigation-title">{{props.title}}</text>
			    <view class="navigation-right">
			        <!-- <view @tap="openSt" class="st_btn" v-if="type!=='pick'&&VER.ver">声明与文献</view> -->
			    </view>
			</view>
			
			<view class="search_box d-flex a-center j-center">
			    <view class="search d-flex d-r a-center">
					<!--
			        <i class="tmicon tmicon-search" style="color: #ccc; font-size: 30rpx" ></i>
					-->
			        <input
			            type="text"
			            class="inp"
			            @input="search"
			            v-model="searchText"
			            placeholder="好友昵称"
			            placeholder-style="color:#ccc;font-size:25rpx;"
			        />
			    </view>
			</view>
			<scroll-view
			    :scroll-y="true"
			    class="content"
			    :style="{ height: `calc(  ${systemInfo.screenHeight}px - ${systemInfo.statusBarHeight}px - 190rpx)` }"
			>
			    <view class="box_view">
			        <view class="list" v-if="groupMembers.length">
			            <view
			                class="psr row d-flex d-r a-center"
			                v-for="m in groupMembers"
			                :key="m.userId"
			                @tap="toggleCheck(m)"
			            >
			                <view class="head_box psr">
			                    <userhead
			                        :width="95"
			                        :height="95"
			                        :saveKey="m.userId"
			                        :isVip="m.isVip"
			                        :src="m.userPhoto"
			                    />
			                </view>
			                <view class="name d-flex a-center">
			                    <rich-text :nodes="m.nodes"></rich-text>
			                </view>
			                <view class="line"></view>
						
			                <view class="visitor d-flex a-center j-center" v-if="m.role==='Tourist'">游客</view>
			                
			            </view>
			        </view>
						
			        <view class="data-null d-flex d-c a-center" v-if="!groupMembers.length">
			            <image class="data-null-image" mode="widthFix" src="/static/img/nodata.png" alt="" />
			            <text class="data-null-text">竟然什么都没有~</text>
			        </view>
			    </view>
			</scroll-view>  
		</view>
	</uni-popup>
</template>

<script setup lang="tsx">
import { ref,defineEmits } from 'vue';
import { getGroupMember } from "@/api/api";
import { getGroupMemberList } from "@/hooks/imHooks";
import { imStore as imStore1 } from "@/store/imStore";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import userhead from "@/components/userhead.vue";
import { userData as userDataStore } from "@/store/userData";

const userData: any = userDataStore();
const systemInfo: any = systemInfoStore();
const imStore: any = imStore1();
const popup = ref()

interface Props {
	title?:string
}
const props = withDefaults(defineProps<Props>(), {
	title:"",
})

const open = (groupId:string) => {
	//查询群人数
	Promise.all([reqGroupMember(groupId)]).then(() => {
	    initData();
	});
	popup.value.open()
}
const close = () => {
	popup.value.close();
}
const searchText = ref("");
const groupMembers:any = ref([]);
const all_groupMembers:any = ref([]);
const selected:any = ref({});
const search = (event:any) => {
	searchText.value = event.detail.value;
    if (!searchText.value) {
        initData();
    }else{
		groupMembers.value = all_groupMembers.value.filter((item:any) => {
		    const str = item.remark || item.userName;
		    if (str.toLowerCase().search(searchText.value.toLowerCase()) !== -1) {
		        return true;
		    } else {
		        return false;
		    }
		});
		matchTextHighLight();
	}
};
const initData = () => {
    const friends = imStore.friends;
    all_groupMembers.value.forEach((item:any)=>{
        friends.forEach((f:any)=>{
            if(f.userID === item.userId){
                item.remark = f.remark;
            }
        })
    })

    const clone_groupMembers = JSON.parse(JSON.stringify(all_groupMembers.value));
    
    groupMembers.value = clone_groupMembers.map((item:any) => {
        let color = "#333";
        if (item.isVip) {
            color = "#F19945";
        }

        return {
            ...item,
            nodes: `<div style="color:${color};font-weight:400;">${
                item.remark || item.userName
            }</div>`,
        };
    });
};
const matchTextHighLight = () => {
    const reg = new RegExp(searchText.value, "gi");
    groupMembers.value = groupMembers.value.map((item:any) => {
        const obj = {
            ...item,
        };
        // const str = `<div style="color:#555;">${item.profile.nick}</div>`;
        const str = item.remark || item.userName;
        const nodes = `<div style="color:#555;font-weight:400;">${str.replace(
            reg,
            (s: any) => {
                return `<span style="color:#23e2a6">${s}</span>`;
            }
        )}</div>`;
        obj.nodes = nodes;
        return obj;
    });
};
const reqGroupMember = async (groupId: string) => {
    const res: any = await getGroupMember({ groupId });
    const { flag, data } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "获取成员列表失败",
            duration: 1500,
        });
    }
    if(selected.value.userId){
        if(data.list.every((item:any)=>item.userId!==selected.value.userId)){
            selected.value={};
        }
    }

    all_groupMembers.value = data.list.filter((item:any)=>item.userId!==userData.id);
};
const emit = defineEmits(["toggleCheck"])
const toggleCheck = (m:any) => {
	emit("toggleCheck",m);
	popup.value.close()
}
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.red-content{
	background: #F5F5F5;
	.content-navigation{
		height: 100rpx;
		background-color: #ffffff;
		.navigation-left{
			width: 108rpx;
			height: 100rpx;
			.back{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.navigation-title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 34rpx;
			color: #000000;
		}
		.navigation-right{
			width: 108rpx;
			height: 100rpx;
		}
	}
	.search_box {
	    width: 750rpx;
	    background: #fff;
	    padding-bottom: 20rpx;
	
	    .search {
	        width: 690rpx;
	        height: 70rpx;
	        border-radius: 10rpx;
	        background: #f5f5f5;
	        padding: 0 30rpx;
	        .inp {
	            width: 570rpx;
	            margin-left: 20rpx;
	            font-size: 25rpx;
	        }
	    }
	}
	
	.content {
	    background: #f5f5f5;
	    .box_view {
	        margin-top: 20rpx;
	        background: #fff;
	        .title {
	            height: 60rpx;
	            font-size: 28rpx;
	            color: #333;
	            font-weight: 400;
	            padding: 0 30rpx;
	        }
	        .list {
	        }
	        .row {
	            position: relative;
	            padding: 0 30rpx;
	            gap: 20rpx;
	            height: 110rpx;
	            .head_box {
	                width: 95rpx;
	                height: 95rpx;
	                .vip_icon {
	                    width: 97rpx;
	                    height: 43rpx;
	                    bottom: -10rpx;
	                }
	            }
	            .head {
	                width: 95rpx;
	                height: 95rpx;
	                border-radius: 50%;
	                box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
	                border: 3px solid #ffffff;
	            }
	            .name {
	                margin-left: 10rpx;
	                font-size: 34rpx;
	                color: $slim-text5;
	                &:active {
	                }
	            }
	
	            &:active {
	                background: #f5f5f5;
	            }
	            .line {
	                position: absolute;
	                height: 1px;
	                width: 600rpx;
	                left: 130rpx;
	                background-color: #f5f5f5;
	                bottom: 0;
	            }
	            .visitor{
	                position:absolute;
	                right:100rpx;
	                font-size:20rpx;
	                color:#F19945;
	                width: 60rpx;
	            height: 32rpx;
	            background: #FBE9D7;
	            border-radius: 4rpx;
	
	            }
	            .joined {
	                color: #aaa;
	                font-size: 28rpx;
	            }
	            .check_box {
	                width: 40rpx;
	                height: 40rpx;
	                border: 2rpx solid #ddd;
	                right: 30rpx;
	                border-radius: 50%;
	                overflow:hidden;
	                background:#fff;
	                &.checked{
	                    background:#23e2a6;
	                    border: 2rpx solid #23e2a6;
	                }
	                .checkImg {
	                    width: 28rpx;
	                    height: 28rpx;
	                }
	            }
	
	            // &::before {
	            //     content: "";
	            //     position: absolute;
	            //     left: 110rpx;
	            //     right: 20rpx;
	            //     bottom: 0;
	            //     height: 1px;
	            //     background-color: #f5f5f5;
	            // }
	        }
	    }
		.data-null{
			padding-top: 300rpx;
			width: 750rpx;
			background-color: #F5F5F5;
			.data-null-image{
				width: 360rpx;
			}
			.data-null-text{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				text-align: center;
			}
		}
	}
}

/*     公共属性     */
.psr {
    position: relative;
}

.psa {
    position: absolute;
}

.center {
    text-align: center;
}

.bold {
    font-weight: bold;
}


.a-center {
    align-items: center;
}

.j-center{
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}


.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
    
}
.d-r {
    flex-direction: row !important;
}

.j-end {
    justify-content: flex-end;
}


.wrap {
    flex-wrap: wrap;
}

.nowrap {
    flex-wrap: nowrap;
}

.uline{
    text-decoration: underline;
}

.c_main{
    color:$slim-main;
}

.b_main{
    background-color:$slim-main;
}

</style>